<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-action-back {
				color: #454545;
			}
			
			.ul-licontent {
				width: 100%;
				background-color: white;
				padding: 0;
				margin-top: 0;
			}
			
			.li-content {
				width: 100%;
				list-style: none;
				margin-left: 0;
			}
			
			.li-content .textshow {
				display: none;
			}
			
			.mui-card {
				width: 100%;
				margin-left: 0;
				margin-top: 0;
				box-shadow: none;
			}
			
			.span-hf {
				color: #3681D6;
				font-size: 100%;
			}
			
			.span-hf .color-span {
				color: black;
			}
			
			.pngs-div {
				float: right;
				display: flex;
				width: 35%;
			}
			
			.pngs-div text {
				display: none
			}

			
			.showdown-div,.showdown-div text {
				display: none;
			}
			
			.hr-div {
				width: 85%;
				margin-left: 15%;
				border-bottom: 1px solid #E8E8EA;
			}
			
			.pngs-div .imgg1 {
				width: 18px;
				height: 18px;
			}
			
			.pngs-div .imgg2,
			.imgg3 {
				width: 18px;
				margin-left: 20%;
				height: 18px;
			}
			
			.input-div {
				width: 100%;
				position: fixed;
				bottom: 0;
				background-color: white;
				padding-top: 2%;
				margin-bottom: 0;
				display: none;
			}
			
			.write-text {
				font-size: 90%;
				overflow-y: hidden;
				border: #323232;
				width: 75%;
				margin-bottom: 0;
				margin-left: 5%;
				border: 1px solid #E5E5E5;
			}
			
			.input-div div {
				margin: auto 0;
				float: right;
				margin-right: 5%;
				transform: translate(0, 50%);
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">详情</h1>
		</header>
		<div class="mui-content">
			<ul class="ul-licontent" id='ulcontent'>
				<!--内容列表渲染处-->
			</ul>
		</div>
		<div class="input-div" id="input-div">
			<textarea name="" class="write-text" id="txtContent" rows="1" cols="30" onkeyup="ResizeTextarea()"></textarea>
			<div id="send-msg">发送</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/immersed.js"></script>
		<script src="../../js/arttmpl.js"></script>
		<script type="text/javascript">
			//textarea自适应说说高度
			function ResizeTextarea() {
				// 最小高度  
				var minRows = 1;
				// 最大高度，超过则出现滚动条  
				var maxRows = 6;
				var t = document.getElementById('txtContent');
				if(t.scrollTop == 0) t.scrollTop = 1;
				while(t.scrollTop == 0) {
					if(t.rows > minRows)
						t.rows--;
					else
						break;
					t.scrollTop = 1;
					if(t.rows < maxRows)
						t.style.overflowY = "hidden";
					if(t.scrollTop > 0) {
						t.rows++;
						break;
					}
				}
				while(t.scrollTop > 0) {
					if(t.rows < maxRows) {
						t.rows++;
						if(t.scrollTop == 0) t.scrollTop = 1;
					} else {
						t.style.overflowY = "auto";
						break;
					}
				}
			}

			(function($) {
				$.init();
				$.plusReady(function() {
					starbar();
					plus.navigator.setStatusBarStyle('dark');
					
					var old_back = mui.back;
					mui.back = function() {
						old_back();
						plus.navigator.setStatusBarStyle('light');
					}
					
					var viewwidth = document.body.clientWidth;
					var padd = document.getElementById('txtContent');
					padd.style.cssText = "padding: -webkit-calc(" + viewwidth * 0.015 + "px) 1%;"
					document.getElementById('input-div').style.cssText = "padding-top: -webkit-calc(" + viewwidth * 0.015 + "px) "
					
					var inputshow = document.getElementById('input-div');
					var originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
					window.onresize = function() {
						//键盘弹起与隐藏都会引起窗口的高度发生变化
						var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
						if(resizeHeight - 0 < originalHeight - 0) {
							inputshow.style.display = 'block'
							//当软键盘弹起，在此处操作
						} else {
							inputshow.style.display = 'none'
							//当软键盘收起，在此处操作
						}
					}

						
				}) 
				window.onload = function() {
					$.plusReady(function() {
						var iddt = plus.webview.currentWebview().adongtai_id;
						mui.ajax({
							url: 'https://www.lunyuwang.com/CommentController/round0Comment',
							data: {
								lycomment_Ered: plus.storage.getItem("card"),
								lydongtai_Id: iddt
							},
							async: true, //将false改为true
							crossDomain: true, //强制使用5+跨域
							dataType: 'json', //服务器返回json格式数据
							type: 'get', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							//processData: false,
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							success: function(data) {
								var cont = data.commentGrade0List;
								var str = template('talk-list', {
									"record": cont
								})
								document.getElementById('ulcontent').innerHTML = str
							},
							error: function(xhr, type, errorThrown) {
								mui.toast("获取内容失败了！");
							}
						})
						var mycard = plus.storage.getItem("card");
						var show = false;
						var iddt = plus.webview.currentWebview().adongtai_id;
						var mynick = plus.webview.currentWebview().nick_name;
						$(document).on('tap', '.imgg1', function() {
							var id = this.parentNode.children[0].textContent;							
							var sign = this.parentNode.children[1].textContent;
							var tonick = this.parentNode.children[2].textContent;
							var conind = document.getElementsByClassName('showdown-div');
							for(var i = 0; i < conind.length; i++) {
								if(conind[i].getElementsByTagName('text')[0].textContent == id) {
									if(show == false) {
										mui.ajax({
											url: 'https://www.lunyuwang.com/CommentController/roundComment',
											data: {
												lycomment_Sign: sign,
												lydongtai_Id: iddt
											},
											async: true, //将false改为true
											crossDomain: true, //强制使用5+跨域
											dataType: 'json', //服务器返回json格式数据
											type: 'get', //HTTP请求类型
											timeout: 10000, //超时时间设置为10秒；
											//processData: false,
											headers: {
												'Content-Type': 'application/x-www-form-urlencoded'
											},
											success: function(data) {
												var cont = data.commentGrade1List;
												if(cont != null) {
													for(var i = 0; i < conind.length; i++) {
														if(conind[i].getElementsByTagName('text')[0].textContent == id) {
															for(var j = 0; j < cont.length; j++) {
																if(cont[j].lycomment_Er == mycard) {
																	var a = '<span class="span-hf">' + mynick + '<span class="color-span">&nbsp;回复&nbsp</span>' + tonick + '：</span><span>' + cont[j].lycomment_Text + '</span><br>';
																	conind[i].innerHTML += a;
																} else {
																	var b = '<span class="span-hf">' + tonick + '<span class="color-span">&nbsp回复&nbsp</span>' + mynick + '：</span><span>' + cont[j].lycomment_Text + '</span><br>';
																	conind[i].innerHTML += b;
																}
															}
														}
													}
												}
											},
											error: function(xhr, type, errorThrown) {
												mui.toast("获取内容失败了！");
											}
										})
										this.style.transform = 'rotate(180deg)';
										conind[i].style.display = 'block';
										show = true;
									} else {
										conind[i].innerHTML = '<text>' + id + '</text><text><%=item.lyuser_NickName%></text>';
										this.style.transform = 'rotate(360deg)';
										conind[i].style.display = 'none';
										show = false;
									}
								}
							}

						})
						var othercard = '';
						var inputshow = document.getElementById('input-div');
						$(document).on('tap', '.imgg2', function() {
							var inp = document.getElementById('txtContent');
							othercard = this.parentNode.children[3].textContent;
							inputshow.style.display = 'block';
							inp.focus();
						})
						$(document).on('tap', '.imgg3', function() {
							var signn = this.parentNode.children[1].textContent;
							var tcard = this.parentNode.children[3].textContent;
							var licont = document.getElementsByClassName('li-content');
							$.confirm('确认删除？', function(e) {
								if(e.index == 0) {
									mui.ajax({
										url: 'https://www.lunyuwang.com/CommentController/delComment',
										data: {
											lycomment_Sign: signn,
											lydongtai_Id: iddt
										},
										async: true, //将false改为true
										crossDomain: true, //强制使用5+跨域
										dataType: 'json', //服务器返回json格式数据
										type: 'get', //HTTP请求类型
										timeout: 10000, //超时时间设置为10秒；
										//processData: false,
										headers: {
											'Content-Type': 'application/x-www-form-urlencoded'
										},
										success: function(data) {
											for(var i = 0; i < licont.length; i++) {
												var textcard = licont[i].getElementsByTagName('text')[0].textContent;
												if(textcard == tcard) {
													if(data.state == 1) {
														licont[i].parentNode.removeChild(licont[i]);
														mui.toast('成功删除对方的评论!');
													}
												}
											}

										},
										error: function(xhr, type, errorThrown) {
											mui.toast("删除失败了！");
										}
									})

								}
							})

						})

						document.getElementById('send-msg').addEventListener('tap', function() {
							var tosign = '';
							var iddt = plus.webview.currentWebview().adongtai_id;
							var contt = document.getElementsByClassName('pngs-div');
							var hfcont = document.getElementsByClassName('showdown-div')
							var send = document.getElementById('txtContent');
							if(send.value == ''){
								mui.toast("发送内容不能为空!");
							}else{
								for(var i = 0; i < contt.length; i++) {
									var textt = contt[i].getElementsByTagName('text');
									if(textt[3].textContent == othercard) {
										var otnernick = hfcont[i].getElementsByTagName('text')[1].textContent;
										tosign = textt[1].textContent;
										mui.ajax({
											url: 'https://www.lunyuwang.com/CommentController/replyComment',
											data: {
												lycomment_Er: mycard,
												lydongtai_Id: iddt,
												lycomment_Ered: othercard,
												lycomment_Text: send.value,
												lycomment_Sign: tosign
											},
											async: true, //将false改为true
											crossDomain: true, //强制使用5+跨域
											dataType: 'json', //服务器返回json格式数据
											type: 'get', //HTTP请求类型
											timeout: 10000, //超时时间设置为10秒；
											//processData: false,
											headers: {
												'Content-Type': 'application/x-www-form-urlencoded'
											},
											success: function(data) {
												if(data.state == 1) {
													for(var i = 0; i < contt.length; i++) {
														var textt = contt[i].getElementsByTagName('text');
														if(textt[3].textContent == othercard) {
															mui.toast('成功回复!');
															if(hfcont[i].style.display == 'block'){														
																var t = '<span class="span-hf">' + mynick + '<span class="color-span">&nbsp回复&nbsp</span>' + otnernick + '：</span><span>' + send.value + '</span><br>';
																hfcont[i].innerHTML += t;															
															}
															send.value = '';
														}
													}
												}
											},
											error: function(xhr, type, errorThrown) {
												mui.toast("回复失败了！");
											}
										})
									}
								}
							}
						})
					})
				}
			})(mui)
		</script>
		<script type="text/template" id="talk-list">
			<% for(var i in record){ var item=record[i]; %>
			<li class="li-content">
				<text class='textshow'><%=item.lycomment_Er%></text>
				<div class="mui-card">
					<div class="mui-card-header mui-card-media cardtop">
						<img src="<%=item.lyuser_FacePath%>" class="imggg" />
						<div class="mui-media-body">
							<span id="name<%=(i+1)%>"><%=item.lyuser_NickName%></span>
							<div class="pngs-div">
								<text><%=item.lycomment_Id%></text>
								<text><%=item.lycomment_Sign%></text>
								<text><%=item.lyuser_NickName%></text>
								<text><%=item.lycomment_Er%></text>
								<img src="../../images/dowwn.png" class="imgg1" />
								<img src="../../images/tall.png" class="imgg2" />
								<img src="../../images/chu.png" class="imgg3" />
							</div>
							<p id="time<%=(i+1)%>">
								<%=item.lycomment_Time%>
							</p>
							<span class="span-hf"><%=item.lyuser_NickName%>：</span><span><%=item.lycomment_Text%></span>
							<div class="showdown-div">
								<text><%=item.lycomment_Id%></text>
								<text><%=item.lyuser_NickName%></text>
							</div>
						</div>
					</div>
				</div>
			</li>
			<div class="hr-div"></div>
			<% } %>
		</script>
	</body>

</html>